<style type="text/css"> 
    @import "<?php echo base_url() ?>assets/third_party/dojo161/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
    @import "<?php echo base_url() ?>assets/third_party/dojo161/dojox/grid/enhanced/resources/tundra/EnhancedGrid.css";
    @import "<?php echo base_url() ?>assets/third_party/dojo161/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
</style>
<script type="text/javascript">
    dojo.require("dojox.grid.EnhancedGrid");
    dojo.require("dojox.grid.enhanced.plugins.Pagination");
    dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojox.grid.enhanced.plugins.Filter");
    dojo.require("dojox.grid.enhanced.plugins.Selector");
    dojo.require("dojox.grid.enhanced.plugins.Menu");
    dojo.require("dojox.grid.enhanced.plugins.DnD");
    dojo.require("dojox.grid.enhanced.plugins.Search");
    dojo.require("dojox.grid.enhanced.plugins.CellMerge");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require('doh.runner');
    
    //tiền tệ
    formatCurrency = function(inDatum){
        return isNaN(inDatum) ? '...' : dojo.currency.format(inDatum, this.constraint);
    }
    //ngày tháng
    formatDate = function(inDatum){
        return dojo.date.locale.format(new Date(inDatum), this.constraint);
    }
    
    //lấy dữ liệu từ json
    var news_store = new dojo.data.ItemFileWriteStore({url: "<?php echo base_url() ?>admin/product/json_product_list"});
		         
    function delete_item(_value){
        if(!confirm("Mày muốn xóa thật hả?")){
            return false;
        }
        alert("Tao sẽ xóa cái sp có id là: "+_value+" Hì hì");
    }          
     
    function update_item(_value){
        alert("Tao sẽ update cái sp có id là: "+_value+" Hì hì");
        return false;
    }
    
    var layout = [{
            cells: [
                { field: "id", name:"id", datatype:"number", width: 4, editable: false, hidden: true},
                { field: "file_name", name:"Image",
                    formatter: function(value) { 
                        return '<img src="<?php echo base_url();?>assets/img/p/' + value + '" width="48px" />';
                    }, 
                   width: 8
                },
                { field: "name", name:"Name",styles: 'text-align: center;', 
                    editable: true,
                    width: 38,
                    type: dojox.grid.cells.Editor, 
                    editorToolbar: true
                },
                { field: "price", name:"Base Price",styles: 'text-align: center;',
                    editable: true,
                    width: 10,
                    type: dojox.grid.cells.Editor, 
                    editorToolbar: true
                },
                { field: "quantity", name:"Quantity",styles: 'text-align: center;',
                    editable: true,
                    width: 10,
                    type: dojox.grid.cells.Editor, 
                    editorToolbar: true
                },
                { field: "username", name:"Owner",styles: 'text-align: center;',
                    width: 10,
                    type: dojox.grid.cells.TreeCell
                },
                {field: "id",name: "Delete",formatter: function(value){
                    return "<a href='#' onclick='delete_item("+value+");return false;'>Delete</a>";
                }},
                {field: "id",name: "Update",formatter: function(value){
                    return "<a href='#' onclick='update_item("+value+");return false;'>Update</a>";
                }}
            ]
        }];
            
    var plugins = {
        "menus": {
        },
        "filter": {
            closeFilterbarButton: true,
            ruleCount: 0
        },
        "selector": {
        },
        "dnd": {
            //copyOnly: false
            dndConfig: {
                //Configure in a hierarchical manner.
                cell: {
                    out: false, //This rule has lower priority, it'll be overwritten.
                    within: false
                }
            }
        },
        "cellMerge": {
            "mergedCells": [
                {row: "3", start: 1, end: 10, major: 3}
            ]
        },
        "search": {},
        pagination: {
            pageSizes: ["10", "25", "50", "100", "All"],	// Array, custom the items per page button
            // itemTitle: "entrys", 	// String, custom the item' title of description
            description: "30%",	// boolean, custom whether or not the description will be displayed
            sizeSwitch: "260px",	// boolean, custom whether or not the page size switch will be displayed
            pageStepper: "30em",	// boolean, custom whether or not the page step will be displayed
            gotoButton: true,	// boolean, custom whether or not the goto page button will be displayed
            maxPageStep: 7,		// Integer, custom how many page step will be displayed
            position: "bottom"	// String, custom the position of the pagination bar
            // there're three options: top, bottom, both
            // ,descTemplate: "${1} ${0}" // A template of the current position description.
        },
        indirectSelection: {
            headerSelector:true,
            name: "Selection",
            width: "60px",
            styles: "text-align: center;"
        }
    };
    
    function view_id(){
        var items = grid.selection.getSelected();
        var ids = [];
        var i = 0;
        if (items.length) {
            dojo.forEach(items, function(selectedItem) {
                ids[i] = grid.store.getValues(selectedItem, "id");
                i++;
            })
        }
        alert(ids.toString());
    }
   

</script>

<div id="gridContainer" style="margin-left: 0px; margin-top: 0px;">
    <div id="grid"  jsId="grid" dojoType="dojox.grid.EnhancedGrid" store="news_store" structure="layout" plugins="plugins" escapeHTMLInData="false">
        <script type="dojo/method">
            
        </script>
    </div>
    <input type='button' value='View ID' onclick='view_id()'/>
</div><br/>
</body>